<template>
  <div
    class="app-container"
    :style="tableHeight"
  >
    <div class="app-title">
      <span>工资项与单位挂接</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="tap-fillet">
          <el-radio-group
            v-model="activeName"
            style="width:800px; height:15px; margin-top:-17px "
          >
            <el-radio-button
              label="0"
              name="didNotReport"
            >单位挂工资
            </el-radio-button>
            <el-radio-button
              label="1"
              name="report"
            >工资挂单位
            </el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
      <!-- 图标 -->
      <div>
        <div style="margin-left:25px; position:absolute; margin-top:3px">
          <img
            style="width:16px; height:16px;"
            :src="allimgSrc"
          >
        </div>

        <div style="margin-left:140px; position:absolute;  margin-top:3px">
          <img
            style="width:16px; height:16px;"
            :src="Untreatedimg"
          >
        </div>
      </div>
      <div class="filter-container">
        <el-col
          style="text-align:right;margin-top: -3px;"
          :span="18"
        >
          <el-button
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            @click="handleQuery"
          >
            重置
          </el-button>
          <el-button
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            @click="saveData"
          >
            保存
          </el-button>
          <!-- <el-button
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
          >
            取消
          </el-button>
          <el-button
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
          >
            导出
          </el-button>
          <el-button
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
          >
            导入
          </el-button> -->
        </el-col>
      </div>
    </el-row>

    <agencyConnSalary
      v-if="activeName=='0'"
      :key="timer"
      ref="chil"
    />
    <salaryConnAgency
      v-if="activeName=='1'"
      :key="timer"
      ref="chi"
    />

  </div>
</template>

<script>
import agencyConnSalary from '@/views/salaryConfigManage/children/agencyConnSalaryChildren'
import salaryConnAgency from '@/views/salaryConfigManage/children/salaryConnAgencyChildren'

export default {
  name: 'SalaryProjectConnect',
  components: { agencyConnSalary, salaryConnAgency },
  data() {
    return {
      tableHeight: null,
      timer: '',
      agency: true,
      salary: true,
      activeName: '0',
      treeData: [],
      allimgSrc: require('@/assets/images/select.png'),
      Untreatedimg: require('@/assets/images/processed.png')
    }
  },
  // 图片显示
  watch: {
    activeName(val) {
      this.timer = new Date().getTime()
      if (val === '0') {
        this.allimgSrc = require('@/assets/images/select.png')
        this.Untreatedimg = require('@/assets/images/processed.png')
      } else {
        this.allimgSrc = require('@/assets/images/blueselect.png')
        this.Untreatedimg = require('@/assets/images/blue.png')
      }
    }
  },
  created() {
  },
  mounted() {
    this.getTbHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTbHeight)
  },
  methods: {
    // 获取table高度的方法
    getTbHeight() {
      const height = window.innerHeight - 93
      this.tableHeight = 'height : ' + height + 'px'
    },
    saveData() {
      if (this.activeName === '0') {
        this.$refs.chil.saveData()
      } else {
        this.$refs.chi.saveData()
      }
    },

    handleQuery() {
      if (this.activeName === '0') {
        this.$refs.chil.handleQuery()
      } else {
        this.$refs.chi.handleQuery()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/border.scss"; /*引入公共样式*/
.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #DCDFE6;
}
</style>
